<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<html>
	<head>

		<title>index.html</title>

		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

		<link href="http://fonts.googleapis.com/css?family=Kreon" rel="stylesheet" type="text/css" />
		<link href="http://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="./css/style.css" />


		<link rel="stylesheet" type="text/css" href="./css/reportStyles.css">
		<link rel="stylesheet" type="text/css" href="./css/jQueryDatePicker.css">

		<SCRIPT SRC="./js/jquery-1.2.6.js"></SCRIPT>

		<SCRIPT SRC="./js/jquery-ui-personalized-1.5.1.min.js"></SCRIPT>

		<SCRIPT SRC="./js/reports.js"></SCRIPT>

		<script type="text/javascript">
	jQuery(document).ready(function() {
		jQuery("#report-name-select").change(function() {
			jQuery("#report-name-select option:selected").each(function() {
				var selectedText = jQuery(this).val();
				<c:forEach var="report" items="${menu.reportLeaves}">
				if (selectedText == "<c:out value="${report.reportId}-report" />") {
					jQuery("#<c:out value="${report.reportId}" />-report").show('slow');
					jQuery("#<c:out value="${report.reportId}" />-report input").show('slow');
				} else {
					jQuery("#<c:out value="${report.reportId}" />-report").hide('slow');
					jQuery("#<c:out value="${report.reportId}" />-report input").hide('slow');
					$("#submitId").hide('slow');

				}
				</c:forEach>
				if (selectedText == "NONE") {
					$("#submitId").hide('slow');
				} else {
					$("#submitId").show('slow');
				}

			});
		});
		$(function() {
			$("#datepicker").datepicker();

			$("select option").filter(function() {
				return $(this).val() == 'NONE';
			}).attr('selected', true);
		});
		jQuery("#report-request-link").click(function() {
			$("#reportRequest").show('slow');
		});
		jQuery("#new-report-link").click(function() {
			$("#file-upload").show('slow');
		});
		jQuery(".submenu ul li a").click(function() {
			var id = $(this).attr('id') + "-report";
			<c:forEach var="report" items="${menu.reportLeaves}">
			if (id == "<c:out value="${report.reportId}-report" />") {
				jQuery("#<c:out value="${report.reportId}" />-report").show('slow');
				jQuery("#<c:out value="${report.reportId}" />-report input").show('slow');
			} else {
				jQuery("#<c:out value="${report.reportId}" />-report").hide('slow');
				jQuery("#<c:out value="${report.reportId}" />-report input").hide('slow');
				$("#submitId").hide('slow');

			}
			</c:forEach>
			$("#submitId").show('slow');
		});
	});
	function hideAllReports() {
		<c:forEach var="report" items="${menu.reportLeaves}">
		jQuery("#<c:out value="${report.reportId}" />-report").hide('slow');
		jQuery("#<c:out value="${report.reportId}" />-report input").hide('slow');
		</c:forEach>
		$("#submitId").hide('slow');
	}
</script>


		<!--  script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->

		<script type="text/javascript" src="./js/ddaccordion.js"></script>

		<script type="text/javascript">
	ddaccordion.init({
		headerclass : "submenuheader", //Shared CSS class name of headers group
		contentclass : "submenu", //Shared CSS class name of contents group
		revealtype : "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
		mouseoverdelay : 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
		collapseprev : true, //Collapse previous content (so only one open at any time)? true/false 
		defaultexpanded : [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
		onemustopen : false, //Specify whether at least one header should be open always (so never all headers closed)
		animatedefault : false, //Should contents open by default be animated into view?
		persiststate : true, //persist state of opened contents within browser session?
		toggleclass : [ "", "" ], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
		togglehtml : [ "suffix", "<img src='images/plus.gif' class='statusicon' />",
				"<img src='images/minus.gif' class='statusicon' />" ], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
		animatespeed : "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
		oninit : function(headers, expandedindices) { //custom code to run when headers have initalized
			//do nothing
		},
		onopenclose : function(header, index, state, isuseractivated) { //custom code to run whenever a header is opened or closed
			//do nothing
		}
	})
</script>
		<style type="text/css">
.glossymenu {
	margin: 5px 0;
	padding: 0;
	width: 300px; /*width of menu*/
	border: 1px solid #9A9A9A;
	border-bottom-width: 0;
}

.glossymenu a.menuitem {
	background: black url(images/glossyback.gif) repeat-x bottom left;
	font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica,
		sans-serif;
	color: white;
	display: block;
	position: relative;
	/*To help in the anchoring of the ".statusicon" icon image*/
	width: auto;
	padding: 4px 0;
	padding-left: 10px;
	text-decoration: none;
}

.glossymenu a.menuitem:visited,.glossymenu .menuitem:active {
	color: white;
}

.glossymenu a.menuitem .statusicon {
	/*CSS for icon image that gets dynamically added to headers*/
	position: absolute;
	top: 5px;
	right: 5px;
	border: none;
}

.glossymenu a.menuitem:hover {
	background-image: url(images/glossyback2.gif);
}

.glossymenu div.submenu { /*DIV that contains each sub menu*/
	background: white;
}

.glossymenu div.submenu ul { /*UL of each sub menu*/
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.glossymenu div.submenu ul li {
	border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a {
	display: block;
	font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica,
		sans-serif;
	color: black;
	text-decoration: none;
	padding: 2px 0;
	padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover {
	background: #DFDCCB;
	colorz: white;
}
</style>


	</head>

	<body>
		<div id="wrapper">

			<div id="splash">
				<img src="images/splash.jpg" width="1140" height="100" alt="" />
			</div>
			<div id="page">
				<div id="content">
					<div class="post">
						<h2>
							Welcome to WIRE
						</h2>
					</div>
					<!--div id="col1" class="post">
					</div-->
					<div id="col2" class="post">
						<h3>
							Web Interface for Report Extraction
						</h3>

						<form action="get-report.car">

							<div id="reportForm">
								<%--
								<span id="reportNameId"> <select id="report-name-select" name="reportName">
										<option value="NONE">
											Choose a report
										</option>

										<c:forEach var="report" items="${menu.reportLeaves}">
											<option value="<c:out value="${report.reportId}-report" />">
												<c:out value="${report.reportId}-report" />
											</option>
										</c:forEach>

									</select> </span>
								<c:forEach var="entry" items="${uiConfig}">
									<div id="<c:out value="${entry.key}" />" style="display: none">
										<c:forEach var="value" items="${entry.value}">
											<c:choose>
												<c:when test="${value.htmlElementType == 'date'}">
													<div class="fieldPromptHeader">
														<c:out value="${value.htmlElementLabel}" />
													</div>
													<input type="text" value="mm/dd/yy" id="datepicker" name="<c:out value="${value.htmlElementName}" />">
												</c:when>
												<c:otherwise>
													<div class="fieldPromptHeader">
														<c:out value="${value.htmlElementLabel}" />
													</div>
													<input type="${value.htmlElementType}" id="test" class="${value.cssClass}"
														name="<c:out value="${value.htmlElementName}" />" />
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</div>
								</c:forEach>
 								--%>
								<c:forEach var="report" items="${menu.reportLeaves}">
									<div id="<c:out value="${report.reportId}-report" />" style="display: none">
										<c:forEach var="uiElement" items="${report.uiElements}">
											<c:choose>
												<c:when test="${uiElement.htmlElementType == 'date'}">
													<div class="fieldPromptHeader">
														<c:out value="${uiElement.htmlElementLabel}" />
													</div>
													<input type="text" value="mm/dd/yy" id="datepicker" name="<c:out value="${uiElement.htmlElementName}" />">
												</c:when>
												<c:otherwise>
													<div class="fieldPromptHeader">
														<c:out value="${uiElement.htmlElementLabel}" />
													</div>
													<input type="${uiElement.htmlElementType}" id="test" class="${uiElement.cssClass}"
														name="<c:out value="${uiElement.htmlElementName}" />" />
												</c:otherwise>
											</c:choose>
										</c:forEach>
									</div>
								</c:forEach>
							</div>

							<div id="submitId">
								<br />
								<input type="submit" value="Get Report" />
							</div>

							<input type="hidden" name="outputType" value="PDF" />

						</form>

						<c:import url="/upload-file.car"></c:import>

						<form action="request-report.car" method="get">
							<div id="reportRequest" style="display: none">
								<div id="reportRequestCategory">
									Choose Category:
									<br />
									<select name="reportRequestCategory">
										<option selected>
											---
										</option>
										<option>
											Users
										</option>
										<option>
											Security Policies
										</option>
										<option>
											Assets
										</option>
										<option>
											Projects
										</option>
									</select>
								</div>
								<div id="reportRequestDescription">
									Description:
									<br />
									<textarea name="reportRequestDescription"></textarea>
								</div>
								<div id="reportRequestSubmission">
									<input type="submit" />
								</div>
							</div>

						</form>
					</div>
					<br class="clearfix" />
				</div>
				<div id="sidebar">
					<div class="post">
						<h3>
							Posuere tortor vitae
						</h3>


						<ul class="list">

							<li>
								<div>
									<div class="glossymenu">
										<a class="menuitem"><c:out value="Media Manager Reports" /> </a>
										<c:set var="categories" value="${menu.reportCategories}" scope="request" />
										<jsp:include page="/WEB-INF/jsp/menu.jsp" />
										<a id="new-report-link" class="menuitem" style="border-bottom-width: 0">Upload a New Report</a>
										<a id="report-request-link" class="menuitem" style="border-bottom-width: 0">Submit a Report Request</a>
										<a class="menuitem" href="" style="border-bottom-width: 0">Contact Support</a>
									</div>
								</div>
								<%--div class="glossymenu">
									<a class="menuitem" href="">Media Manager Reports</a>
									<a class="menuitem submenuheader" href="">Users</a>
									<div class="submenu">
										<ul>
											<li>
												<a href="">Logins this week</a>
											</li>
										</ul>
									</div>
									<a class="menuitem submenuheader" href="">Security Policies</a>
									<div class="submenu">
										<ul>
											<li>
												<a href="">Assets in policy</a>
											</li>
										</ul>
										<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
									</div>
									<a class="menuitem submenuheader" href="">Assets</a>
									<div class="submenu">
										<ul>
											<li>
												<a href="">Assets in policy</a>
											</li>
										</ul>
										<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
									</div>
									<a id="report-request-link" class="menuitem" style="border-bottom-width: 0">Submit a Report Request</a>
									<a class="menuitem" href="" style="border-bottom-width: 0">Contact Support</a>
								</div --%>
							</li>
						</ul>
					</div>
				</div>
				<br class="clearfix" />
			</div>
		</div>
		<div id="footer">
			&copy; 2012 | Chesnut Consulting

		</div>
	</body>
</html>
